var config = {
    menu : {
        brand: {
            name: 'brand',
            label: '名字',
            icon: 'smile-o',
            link: 'index.html'
        },
        left: [
            {
                name: 'home_page',
                label: '主页',
                icon: 'home',
                link: 'index.html'
            },
            {
                name: 'tool',
                label: '工具',
                icon: 'search',
                link: 'pages/public/tools.html'
            },
            {
                name: 'more',
                label: 'More',
                icon: '',
                link: '',
                sub_menu: [
                    {
                        label: '群成员生日表',
                        icon: 'birthday-cake',
                        link: 'pages/public/qun_member_birthday.html'
                    },
                    {
                        label: 'divider',
                        divider: true
                    },
                    {
                        label: '代码文章测试',
                        icon: 'code',
                        link: 'pages/public/javascript_code_test.html'
                    },
                    {
                        label: '代码大全高亮测试',
                        icon: 'code',
                        link: 'pages/public/code_highlight.html'
                    },
                    {
                        label: '文字文章测试',
                        icon: 'newspaper-o',
                        link: 'pages/public/text_test.html'
                    },
                    {
                        label: 'divider',
                        divider: true
                    },
                    {
                        label: 'Ubuntu 下安装MySQL',
                        icon: 'linux',
                        link: 'pages/hfx/ubuntu_install_mysql.html'
                    },
                    {
                        label: 'IDEA 错误的字体配置',
                        icon: 'linux',
                        link: 'pages/hfx/idea_bad_font_config.html'
                    },
                    {
                        label: '封面',
                        icon: 'diamond',
                        link: 'cover.html'
                    },
                ]
            }
        ],
        right: [
            {
                name: 'about',
                label: '关于',
                icon: 'info',
                link: 'about.html'
            }
        ]
    }
};


$(document).ready(function() {
    initNavbar();
    initFooter();
});


function initNavbar() {
    var nav = $('#_navbar');
    // 如果没有找到_navbar表示不需要navbar
    if (nav.length == 1) {
        var navbarHTML = template.compile(getNavTemplate())(config);
        nav.html(navbarHTML);
    }
}

function initFooter() {
    var footer = $('#_footer');
    if (footer.length == 1) {
        footer.html(getFooterTemplate());
    }
}



/**
 * 获取Navbar的模板
 * @returns {string}
 */
function getNavTemplate() {
    var template =
        '<nav class="navbar navbar-default">' +
            '<div class="container-fluid">' +
                '<div class="navbar-header">' +
                    '<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">' +
                        '<span class="sr-only">Toggle navigation</span>' +
                        '<span class="icon-bar"></span>' +
                        '<span class="icon-bar"></span>' +
                        '<span class="icon-bar"></span>' +
                    '</button>' +
                    '<a class="navbar-brand" href="{{menu.brand.link}}"><i class="fa fa-{{menu.brand.icon}}"></i>&nbsp;{{menu.brand.label}}</a>' +
                '</div>' +
                '<div id="navbar" class="navbar-collapse collapse">' +
                    '<ul class="nav navbar-nav">' +
                        '{{each menu.left as item i}}' +
                        '{{if !item.sub_menu}}' +
                        '<li><a href="{{item.link}}"><i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.label}}</a></li>' +
                        '{{else}}' +
                        '<li class="dropdown"><a href="{{item.link}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.label}}<span class="caret"></span></a>' +
                            '<ul class="dropdown-menu">' +
                                '{{each item.sub_menu as sub_item j}}' +
                                '{{if !sub_item.divider}}' +
                                '<li><a href="{{sub_item.link}}"><i class="fa fa-{{sub_item.icon}}"></i>&nbsp;{{sub_item.label}}</a></li>' +
                                '{{else}}' +
                                '<li role="separator" class="divider"></li>' +
                                '{{/if}}' +
                                '{{/each}}' +
                            '</ul>' +
                        '</li>' +
                        '{{/if}}' +
                        '{{/each}}' +
                    '</ul>' +
                    '<ul class="nav navbar-nav navbar-right">' +
                        '{{each menu.right as item i}}' +
                        '{{if !item.sub_menu}}' +
                        '<li><a href="{{item.link}}"><i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.label}}</a></li>' +
                        '{{else}}' +
                        '<li class="dropdown"><a href="{{item.link}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-{{item.icon}}"></i>&nbsp;{{item.label}}<span class="caret"></span></a>' +
                            '<ul class="dropdown-menu">' +
                                '{{each item.sub_menu as sub_item j}}' +
                                '{{if !sub_item.divider}}' +
                                '<li><a href="{{sub_item.link}}"><i class="fa fa-{{sub_item.icon}}"></i>&nbsp;{{sub_item.label}}</a></li>' +
                                '{{else}}' +
                                '<li role="separator" class="divider"></li>' +
                                '{{/if}}' +
                                '{{/each}}' +
                            '</ul>' +
                        '</li>' +
                        '{{/if}}' +
                        '{{/each}}' +
                    '</ul>' +
                '</div>' +
            '</div>' +
        '</nav>';

    return template;
}


/**
 *
 * @returns {string}
 */
function getFooterTemplate() {

    var year = new Date().getFullYear();
    var template = '<footer class="text-center">&copy; '+ year +'</footer>';
    return template;
}